import React, { useState } from 'react';
import {
  Grid,
  Paper,
  Typography,
  Tabs,
  Tab,
  TextField,
  Select,
  MenuItem,
  Button,
  Box,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Divider,
  InputLabel,
  FormControl
} from '@mui/material';
import { CloudUpload, Download } from '@mui/icons-material';

const DataEntryBatchImport: React.FC = () => {
  const [tabIndex, setTabIndex] = useState(0);
  const [standardLevel, setStandardLevel] = useState('');

  const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
    setTabIndex(newValue);
  };

  return (
    <Box p={2} sx={{ background: '#0B1F3A', minHeight: '100vh', color: '#fff' }}>
      <Grid container spacing={2}>
        {/* 表单设计 */}
        <Grid item xs={12} md={6}>
          <Paper sx={{ p: 3, backgroundColor: '#132F4C', borderRadius: 2 }}>
            <Typography variant="h6" sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
              📝 表单设计
            </Typography>
            <Tabs value={tabIndex} onChange={handleTabChange} textColor="inherit" indicatorColor="secondary">
              <Tab label="评估指标数据录入" />
            </Tabs>

            <Divider sx={{ my: 2 }} />

            <Typography color="#73A7D6" gutterBottom>数据治理能力域</Typography>

            <Grid container spacing={2}>
              <Grid item xs={6}>
                <TextField
                  label="数据质量得分 *"
                  type="number"
                  fullWidth
                  InputLabelProps={{ shrink: true }}
                  InputProps={{ style: { color: '#fff' } }}
                  sx={{ input: { color: '#fff' } }}
                />
              </Grid>
              <Grid item xs={6}>
                <Typography>定量指标</Typography>
              </Grid>

              <Grid item xs={6}>
                <FormControl fullWidth>
                  <InputLabel shrink sx={{ color: '#fff' }}>数据标准化程度</InputLabel>
                  <Select
                    value={standardLevel}
                    onChange={(e) => setStandardLevel(e.target.value)}
                    displayEmpty
                    sx={{ color: '#fff' }}
                  >
                    <MenuItem value="">请选择</MenuItem>
                    <MenuItem value="优秀">优秀</MenuItem>
                    <MenuItem value="良好">良好</MenuItem>
                    <MenuItem value="一般">一般</MenuItem>
                  </Select>
                </FormControl>
              </Grid>
              <Grid item xs={6}>
                <Typography>定性指标</Typography>
              </Grid>

              <Grid item xs={6}>
                <TextField
                  label="数据治理说明"
                  multiline
                  fullWidth
                  InputLabelProps={{ shrink: true }}
                  sx={{ input: { color: '#fff' }, textarea: { color: '#fff' } }}
                />
              </Grid>
              <Grid item xs={6}>
                <Typography>补充说明</Typography>
              </Grid>

              <Grid item xs={6}>
                <Typography color="#73A7D6">技术架构能力域</Typography>
                <TextField
                  type="date"
                  fullWidth
                  placeholder="YYYY-MM-DD"
                  InputLabelProps={{ shrink: true }}
                  sx={{ input: { color: '#fff' } }}
                />
              </Grid>
              <Grid item xs={6}>
                <Typography>日期类型</Typography>
              </Grid>
            </Grid>

            <Box mt={3} display="flex" justifyContent="flex-end">
              <Button variant="outlined" sx={{ mr: 2 }}>取消</Button>
              <Button variant="contained">保存数据</Button>
            </Box>
          </Paper>
        </Grid>

        {/* 批量导入功能 */}
        <Grid item xs={12} md={6}>
          <Paper sx={{ p: 3, backgroundColor: '#132F4C', borderRadius: 2 }}>
            <Typography variant="h6" sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
              📥 批量导入功能
            </Typography>

            <Box mb={3}>
              <Typography>1 下载导入模板</Typography>
              <Button variant="contained" startIcon={<Download />} sx={{ mt: 1 }}>
                标准化数据导入模板.xlsx
              </Button>
            </Box>

            <Box mb={3}>
              <Typography>2 上传数据文件</Typography>
              <Box
                sx={{
                  border: '2px dashed #4A90E2',
                  borderRadius: 2,
                  textAlign: 'center',
                  py: 5,
                  mt: 1,
                  color: '#90CAF9'
                }}
              >
                <CloudUpload fontSize="large" />
                <Typography>拖拽文件至此处或点击上传</Typography>
                <Typography variant="caption">支持 Excel、CSV 格式</Typography>
              </Box>
            </Box>

            <Box>
              <Typography>3 数据预览与映射</Typography>
              <TableContainer>
                <Table size="small">
                  <TableHead>
                    <TableRow>
                      <TableCell sx={{ color: '#90CAF9' }}>指标ID</TableCell>
                      <TableCell sx={{ color: '#90CAF9' }}>指标名称</TableCell>
                      <TableCell sx={{ color: '#90CAF9' }}>数值</TableCell>
                      <TableCell sx={{ color: '#90CAF9' }}>映射状态</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    <TableRow>
                      <TableCell>A001</TableCell>
                      <TableCell>数据质量得分</TableCell>
                      <TableCell>85</TableCell>
                      <TableCell>✅</TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell>A002</TableCell>
                      <TableCell>数据标准化程度</TableCell>
                      <TableCell>优秀</TableCell>
                      <TableCell>✅</TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </TableContainer>
            </Box>
          </Paper>
        </Grid>
      </Grid>
    </Box>
  );
};

export default DataEntryBatchImport;
